<style>
</style>
<template>
    <ly-page>
        <ly-navi type="back" title="数据集合"></ly-navi>
        <ly-page-content>
            <el-form label-width="125px" size="small">
                <el-divider content-position="left">有边框</el-divider>
                <el-form-item label="测试字段" prop="name">
                    <ly-collection v-model="d1" :min="1" :max="5" border style="width: 650px;">
                        <ly-collection-column label="联系人姓名">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.name"></el-input>
                            </template>
                        </ly-collection-column>
                        <ly-collection-column label="联系人电话">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.tel"></el-input>
                            </template>
                        </ly-collection-column>
                        <ly-collection-column label="关系">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.rel"></el-input>
                            </template>
                        </ly-collection-column>
                    </ly-collection>
                </el-form-item>
                <ly-code-view>
                    <pre v-pre>
<el-form-item label="测试字段" prop="name">
    <ly-collection v-model="d1" :min="1" :max="5" border style="width: 650px;">
        <ly-collection-column label="联系人姓名">
                <n>ff</n>
                <templ slot-scope="scope">
                    <el-input v-model="scope.row.name"></el-input>
                </templ>
        </ly-collection-column>
        <ly-collection-column label="联系人电话">
                 <templ slot-scope="scope">
                        <el-input v-model="scope.row.tel"></el-input>
                 </templ>
        </ly-collection-column>
        <ly-collection-column label="关系">
                 <templ slot-scope="scope">
                         <el-input v-model="scope.row.rel"></el-input>
                 </templ>
        </ly-collection-column>
    </ly-collection>
</el-form-item>
                    </pre>
                </ly-code-view>
                <el-divider content-position="left">自定义添加方法</el-divider>
                <el-form-item label="测试字段" prop="name">
                    <ly-collection v-model="d4" :min="1" :max="5" add-text="添加" :add-method="onAdd" border
                                   style="width: 650px;">
                        <ly-collection-column label="联系人姓名">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.name"></el-input>
                            </template>
                        </ly-collection-column>
                        <ly-collection-column label="联系人电话">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.tel"></el-input>
                            </template>
                        </ly-collection-column>
                        <ly-collection-column label="关系">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.rel"></el-input>
                            </template>
                        </ly-collection-column>
                    </ly-collection>
                </el-form-item>
                <ly-code-view>
                    <pre v-pre>
<el-form-item label="测试字段" prop="name">
    <ly-collection v-model="d4" :min="1" :max="5" add-text="添加" :add-method="onAdd" border style="width: 650px;">
        <ly-collection-column label="联系人姓名">
                <templ slot-scope="scope">
                    <el-input v-model="scope.row.name"></el-input>
                </templ>
        </ly-collection-column>
        <ly-collection-column label="联系人电话">
                 <templ slot-scope="scope">
                        <el-input v-model="scope.row.tel"></el-input>
                 </templ>
        </ly-collection-column>
        <ly-collection-column label="关系">
                 <templ slot-scope="scope">
                         <el-input v-model="scope.row.rel"></el-input>
                 </templ>
        </ly-collection-column>
    </ly-collection>

  methods: {
        onAdd:function () {
            return {
                name:'测试',
                tel:'dfdfdf',
                rel:'dddd'
            }
        }

    }

</el-form-item>
                    </pre>
                </ly-code-view>


                <el-divider content-position="left">无边框</el-divider>
                <el-form-item label="测试字段" prop="name">
                    <ly-collection v-model="d3" :min="1" :max="5">
                        <ly-collection-column label="联系人姓名">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.name"></el-input>
                            </template>
                        </ly-collection-column>
                        <ly-collection-column label="联系人电话">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.tel"></el-input>
                            </template>
                        </ly-collection-column>
                        <ly-collection-column label="关系">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.rel"></el-input>
                            </template>
                        </ly-collection-column>
                    </ly-collection>
                </el-form-item>
                <ly-code-view>
                    <pre v-pre>
<el-form-item label="测试字段" prop="name">
    <ly-collection v-model="d3" :min="1" :max="5">
        <ly-collection-column label="联系人姓名">
            <templ slot-scope="scope">
                    <el-input v-model="scope.row.name"></el-input>
            </templ>
        </ly-collection-column>
        <ly-collection-column label="联系人电话">
             <templ slot-scope="scope">
                    <el-input v-model="scope.row.tel"></el-input>
            </templ>
        </ly-collection-column>
        <ly-collection-column label="关系">
            <templ slot-scope="scope">
                    <el-input v-model="scope.row.rel"></el-input>
            </templ>
        </ly-collection-column>
    </ly-collection>
</el-form-item>
                        </pre>
                </ly-code-view>
                <el-divider content-position="left">无边框-多行</el-divider>
                <el-form-item label="测试字段" prop="name">
                    <ly-collection v-model="d2" :min="1" :max="5" line>
                        <ly-collection-column label="联系人姓名">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.name"></el-input>
                            </template>
                        </ly-collection-column>
                        <ly-collection-column label="联系人电话">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.tel"></el-input>
                            </template>
                        </ly-collection-column>
                        <ly-collection-column label="关系">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.rel"></el-input>
                            </template>
                        </ly-collection-column>
                    </ly-collection>
                </el-form-item>
                <ly-code-view>
                    <pre v-pre>
 <el-form-item label="测试字段" prop="name">
    <ly-collection v-model="d2" :min="1" :max="5" line>
        <ly-collection-column label="联系人姓名">
            <templ slot-scope="scope">
                    <el-input v-model="scope.row.name"></el-input>
            </templ>
        </ly-collection-column>
        <ly-collection-column label="联系人电话">
            <templ slot-scope="scope">
                    <el-input v-model="scope.row.tel"></el-input>
            </templ>
        </ly-collection-column>
        <ly-collection-column label="关系">
             <templ slot-scope="scope">
                    <el-input v-model="scope.row.rel"></el-input>
             </templ>
        </ly-collection-column>
    </ly-collection>
</el-form-item>
                    </pre>
                </ly-code-view>
            </el-form>

            <ly-markdown>
                <pre v-pre>
## `ly-collection`
------

#### Attributes

| 属性名  |说明   | 类型|可选值|默认值|
| ------------ | ------------ |------------ |------------ |------------ |
|   v-model | 值	  |Array |—	|—	|
|  min |  最小数量	  |int |	|1	|
|  max |  最大数量	  |int |	|100|
|  max-message |  超过最大数量提示 |string|	|最多添加n组数据 |
|  add-text | 添加按钮文字 |string|	|添加一组 |
|  add-method | 添加方法,返回添加的对象 |function|	|返回{}对象 |

## `ly-collection-column`
------

#### Attributes

| 属性名  |说明   | 类型|可选值|默认值|
| ------------ | ------------ |------------ |------------ |------------ |
|  label | 显示标题	  |string |—	|—	|

#### slot
| 名称 |说明   |
| ------------ | ------------ |
| default | 自定义内容	  |

#### slot pro

| 属性名  |说明   | 类型|可选值|默认值|
| ------------ | ------------ |------------ |------------ |------------ |
|  row | 当前行数据 |object |—	|—	|
|  column | 当前列 |object |—	|—	|
|  index | 当前行  | index |—	|—	|

                </pre>
            </ly-markdown>

        </ly-page-content>
    </ly-page>
</template>
<script>
    Rap.define("", [], function () {
        return {
            data: function () {
                return {
                    d1: null,
                    d2: null,
                    d3: null,
                    d4: null
                }
            },
            mounted: function () {
            },
            methods: {
                onAdd: function () {
                    return {
                        name: '测试',
                        tel: 'dfdfdf',
                        rel: 'dddd'
                    }
                }

            }
        }
    })
</script>